<template>
    <img src="/home-img.png" class="home-img">

    <div class="register">
        <el-card>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                :label-position="'top'"
                label-width="100px"
                style="max-width: 460px"
            >
                <el-form-item>
                    <h2>用户注册</h2>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="ruleForm.userName"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"/>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model="ruleForm.checkPass"/>
                </el-form-item>
                <el-form-item>
                    <el-link @click="to('/login')">已有账号，前往登录</el-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
                    <el-button type="primary" @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import request from "@/request";
import store from "@/store";
import {ElMessage} from "element-plus";

name = "RegisterView"

const router = useRouter();

const onSubmit = () => {
    request.post("user/register", {
        ...ruleForm
    }).then(({data}) => {
        if (data.code === 200) {
            let token = data.data.token;
            localStorage.setItem("token", token);
            console.log(token);
            ElMessage({
                message: '用户注册成功',
                type: 'success',
            })
            router.push("/")
        }else {
            let message = data.msg
            ElMessage({
                message: message,
                type: 'error',
            })
        }
    });
}

const ruleFormRef = ref()

const ruleForm = reactive({
    userName: '',
    password: '',
    checkPass: '',
})
const validateUserName = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('用户名不能为空'))
    }else {
        callback()
    }
}

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('密码不能为空'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value)
                return ruleFormRef.value.validateField('checkPass', () => null);
        }
        callback()
    }
}

const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('确认密码不能为空'))
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码不一致"))
    } else {
        callback()
    }
}

const rules = reactive({
    userName: [{validator: validateUserName, trigger: 'blur'}],
    password: [{validator: validatePass, trigger: 'blur'}],
    checkPass: [{validator: validatePass2, trigger: 'blur'}],
});

const submitForm = (formEl) => {
    console.log(ruleFormRef.value)
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            onSubmit()
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

const to = (path) => {
    router.push(path);
};
</script>

<style scoped>
.register {
    font-size: 16px;
    max-width: 350px;
    min-width: 200px;
    text-align: center;
    margin: 100px auto;
}

.el-link {
    margin: auto 8px;
    font-size: 13px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}
.home-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -9999;
}
</style>
